<template>

  <div class="box">
    <div class="directory">

      <div class="item" v-for="i in rootGoodList" @mouseenter="showdetail(i.name)">
        <span style="margin:auto"> {{ i.name }}</span>
      </div>

    </div>
    <div class="detail" v-if="nowroot != ''" @mouseleave="() => nowroot = ''">
      <div v-for="item in showList.find((i) => nowroot === i.root).list">
        <div class="itemshow">
          <img :src="item.img" height="50px" />
          {{ item.name }}

        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getThemeApi, getGoodsApi } from "@/apis/home";
import GoodItem from "@/components/GoodItem.vue";


//商品数据
const rootGoodList = reactive([]);
const subGoodList = reactive([]);
const showList = reactive([]);
const nowroot = ref('')

// 在组件挂载前发送请求获取数据
onMounted(() => {
  getGoods();
});

const getGoods = async () => {
  //获取商品数据
  const res = await getGoodsApi();
  if (res.data.code != 0 || res.data.data == null) {
    alert("获取商品数据失败，请稍后再试");
    return;
  }
  let a = res.data.data;
  Object.assign(rootGoodList, a.roots);
  Object.assign(subGoodList, a.subs);

  for (let i = 0; i < rootGoodList.length; i++) {
    let list = [];
    for (let j = 0; j < subGoodList.length; j++) {
      if (subGoodList[j].parentId === rootGoodList[i].id) {
        list.push(subGoodList[j]);
      }
    }
    showList.push({
      root: rootGoodList[i].name,
      list: list,
    });
  }

};

const showdetail = (name) => {
  nowroot.value = name

}

</script>

<style scoped lang="scss">
.box {
  display: flex;
  position: absolute;
  left: 24%;
  top: 17%;

  z-index: 9999;
}

.directory {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100px;

  .item {
    margin: 5px 0;
    height: 100%;
    display: flex;
    justify-content: center;
    user-select: none;

    border: {
      style: double;
      color: black;
      radius: 5px;
    }

    ;

    &:hover {
      color: rgb(0, 17, 255);
      text-decoration: underline;
    }
  }

}

.detail {
  display: flex;
  align-content: start;
  flex-wrap: wrap;
  width: 500px;
  background-color: rgb(115, 249, 205, 0.5);

  .itemshow {
    display: flex;
    flex-direction: column;
    border-style: none;

  }

  div {
    margin: 10px;
    font-size: 30px;
    font-weight: 700px;

    border: {
      style: solid;
      color: black;
      radius: 5px;
      width: 1px;
    }

    ;
  }
}
</style>